<template>
  <div id="waitList">
    <div>
      <h3>待转数据列表</h3>
      <div v-if="userInfo.roleId != 1" class="btn-group">
        <el-button size="medium" type="danger" @click="openDialog(true)" class="eventBtn">
          全部清空
        </el-button>
        <el-button size="medium" type="warning"  @click="openDialog(false)" class="eventBtn">
          选中移除
        </el-button>
        <el-button size="medium" type="success" @click="infoFormVisible = true" class="eventBtn">
          开始推送
        </el-button>
      </div>
    </div>

    <el-dialog
      :visible.sync="visible"
      width="30%"
    >
      <el-alert
        :title=" isAllDelete ? '确认清空所有待转列表数据?' : ('确认移除所选择的 '+ multipleSelection.length  +' 条待转数据?') "
        type="warning"
        show-icon
        :closable="false"
      >
      </el-alert>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="deleteData">确 定</el-button>
      </span>
    </el-dialog>


    <el-dialog width="400px"
               title="推送"
               :visible.sync="infoFormVisible"
               @close="cancledialog('sendForm')"
    >

      <el-form :model="allot"  :rules="rules" ref="sendForm">
        <!--这里必须套一个div 不然先点击批量后点击选中  弹框关闭时会报错-->
        <div>
          <el-form-item prop="folder"
                        label="批次名称"
                        :label-width="formLabelWidth">
            <el-input style="width: 200px;" v-model.sync="allot.folder"  placeholder="请输入批次名称"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="目标机构" prop="orgId" :label-width="formLabelWidth">
            <el-select v-model="allot.orgId" clearable multiple filterable placeholder="请选择">
              <el-option
                v-for="item in orgList"
                :key="item.value"
                :label="item.orgName"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div >
          <el-form-item label="当前总条数 : "
                        :label-width="formLabelWidth">
            <span>{{ total }} 条</span>
          </el-form-item>
        </div>
        <div class="batchMark">
          注释:适用于大批量数据推送。输入想要推送的数据数量，选择目标机构。(一次最多推送2000条)
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="pushEvent">推 送</el-button>
        <el-button @click="infoFormVisible = false" size="mini">取 消</el-button>
      </div>
    </el-dialog>

    <el-table @selection-change="handleSelectionChange"
              empty-text="暂无任何用户信息"
              :data="list"
              v-loading.body="listLoading"
              border
              fit
              style="width: 100%">
      <el-table-column
        align="center"
        type="selection"
        width="40">
      </el-table-column>
      <el-table-column align="center" label="数据ID">
        <template slot-scope="scope">
          <span>{{scope.row.customerName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="电话">
        <template slot-scope="scope">
          <span>{{ !!scope.row.phone ? scope.row.phone : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="微信">
        <template slot-scope="scope">
          <span>{{ !!scope.row.weChat ? scope.row.weChat : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="数据状态">
        <template slot-scope="scope">
          <p v-for="(item,idx) in scope.row.status.split('$')">
            {{item}}
          </p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="当前机构">
        <template slot-scope="scope">
          <span>{{ !!scope.row.orgName ? scope.row.orgName : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="批次名称">
        <template slot-scope="scope">
          <span>{{ !!scope.row.folderName ? scope.row.folderName : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="关键词">
        <template slot-scope="scope">
          <p v-for="(item,idx) in scope.row.word">
            {{item}}
          </p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="系统标签">
        <template slot-scope="scope">
          <p v-for="(item,idx) in scope.row.label">
            {{item}}
          </p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="客服标签">
        <template slot-scope="scope">
          <p v-for="(item,idx) in scope.row.userLabel.split('$')">
            {{item}}
          </p>
        </template>
      </el-table-column>
      <el-table-column align="center" label="意向项目">
        <template slot-scope="scope">
          <span>{{ !!scope.row.item ? scope.row.item : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="号码归属地">
        <template slot-scope="scope">
          <span>{{ scope.row.provinceName + ( scope.row.cityName === '' ? '' :  '/' + scope.row.cityName ) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="客服">
        <template slot-scope="scope">
          <span>{{ !!scope.row.userName ? scope.row.userName : '-' }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <router-link @click.native="saveLocal(scope.row)"  style="margin-right: 9px;" :to="{path:'/datapush/detail'}">
            <el-button type="primary" size="small" >详情</el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="pagination-container">
      <el-pagination background
                     @size-change="handleSizeChange"
                     prev-text="上一页"
                     next-text="下一页"
                     @current-change="handleCurrentChange"
                     :current-page="query.current"
                     :page-sizes="[10,20,30,50]"
                     :page-size="query.pagesize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
    import { mapGetters } from 'vuex';
    import { getWaitList ,deleteWaitList , getOrgList ,pushWaitList} from '@/api/datapush'
    export default {
        name: "waitlist",
        data(){
            return {
              allot:{
                folder:'',
                orgId:[]
              },
              orgList:[],
              infoFormVisible:false,
              formLabelWidth:'120px',
              isAllDelete:false,
              visible:false,
              multipleSelection: [], //列选中的列id
              list:[],
              listLoading:false,
              total:0,
              rules: {
                orgId: [
                  {type:'array' , required: true, message: '请选择目标机构', trigger: 'change'},
                ],
                folder:[
                  {required: true, message: '请填写批次名称', trigger: 'blur'},
                ]
              },
              query:{
                current:1,
                pagesize:10,
                companyId:'',
              }
            }
        },
        computed:{
          ...mapGetters([
            'userInfo'
          ])
        },
        watch: {
          // 如果路由有变化，会再次执行该方法
          '$route'(to,from){
            if(to.path === '/pushed/waitList'){
              if(this.userInfo.roleId == 1 && !this.userInfo.companyId){
                this.$message.error('当前身份没有companyId,请去首页设置临时公司身份');
              } else {
                this.query.companyId = this.userInfo.companyId;
                this.getList();
                this.getOrgList();
              }
            }
          }
        },
        created(){
          if(this.userInfo.roleId == 1 && !this.userInfo.companyId){
            this.$message.error('当前身份没有companyId,请去首页设置临时公司身份');
          } else {
            this.query.companyId = this.userInfo.companyId;
            this.getList();
            this.getOrgList();
          }
        },
        methods:{
          getOrgList(){
            getOrgList().then(res=>{
              let temp = res.data.info;
              this.orgList = temp;
            }).catch(res=>{
              this.$message.error(res)
            })
          },
          pushEvent(){
            this.$refs.sendForm.validate(valid=>{
              if(!valid){
                return
              }

              let temp = {
                companyId:this.userInfo.companyId,
                userId:this.userInfo.userId
              }
              temp = Object.assign({},temp,this.allot);
              pushWaitList(temp).then(res=>{
                this.$message.success(res.msg);
                this.infoFormVisible = false;
                this.getList();
              }).catch(res=>{
                this.infoFormVisible = false;
                this.$message.error(res);
              })

            })

          },
          deleteData(){
            let temp = {
              companyId:this.query.companyId,
            }
            if(!this.isAllDelete){
              if(!this.multipleSelection.length){
                this.$message.warning('至少选择一条再进行清空');
                this.visible = false;
                return
              }
              temp[ 'customerId'] = this.multipleSelection
            }
            deleteWaitList(temp).then(res=>{
              this.visible = false;
              this.$message.success(res.msg);
              this.getList();
            }).catch(res=>{
              this.visible = false;
              this.$message.error(res);
            })
          },
          openDialog(flag){
            this.visible = true;
            this.isAllDelete = flag;
          },
          getList(){
            getWaitList(this.query).then(res=>{
              let temp = res.data;
              this.total = temp.total;
              this.list = temp.Info;
            }).catch(res=>{
              this.$message.error(res);
            })
          },
          saveLocal(item){
            let local_user = localStorage.getItem('PUSH_DATA');
            !!local_user ? localStorage.removeItem('PUSH_DATA') : null;
            localStorage.setItem('PUSH_DATA',JSON.stringify(item))
          },
          cancledialog(userForm) {
            //重置表单
            this.$refs[userForm].resetFields();
          },
          handleSelectionChange(val) {
            this.multipleSelection = val.map(v => v.customerId);
          },
          handleSizeChange(val) {
            this.query.pagesize = val;
            this.getList();
          },
          handleCurrentChange(val){
            this.query.current = val;
            this.getList();
          },
        }
    }
</script>

<style type="text/scss" lang="scss" scoped>
  #waitList {
    >div {
      margin: 20px 0px;
    }
    h3 {
      display: inline-block;
      height: 36px;
      margin: 0;
      line-height: 36px;
    }
    .btn-group {
      display: inline-block;
      float: right;
      margin-right: 10%;
    }
    .el-alert--warning {
      background-color:#fff
    }
  }
</style>
